<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Dojo Slider Widget Demo</title>

		<style type="text/css">
			@import "../../themes/claro/document.css";
			@import "../css/dijitTests.css";
			@import "../../../util/doh/robot/robot.css";
			#slider2 .dijitButtonNode {
				width:12px;
				height:12px;
				border: none;
				font-size:11px;
				padding:0;
			}
		</style>

		<script type="text/javascript" src="../boilerplate.js"></script>

		<script type="text/javascript">
			var registry, dom;
			require([
				"dojo/dom",
				"dojo/parser",
				"dijit/registry",

				// used by parser
				"dijit/form/Button",
				"dijit/form/HorizontalSlider",
				"dijit/form/VerticalSlider",
				"dijit/form/HorizontalRule",
				"dijit/form/VerticalRule",
				"dijit/form/HorizontalRuleLabels",
				"dijit/form/VerticalRuleLabels",
				"dojo/domReady!"
			], function(dm, parser, rgstry){
					// used by event handlers
					dom = dm;
					registry = rgstry;

					parser.parse();
			});
		</script>
	</head>

	<body role="main">
		<h1 class="testTitle">Slider</h1>
		Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.
		<br>
		<!--    to test form submission, you'll need to create an action handler similar to
			http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
		<form id="form1" action="" name="example" method="post">

		<h2>Horizontal Slider Example</h2>
		initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br>
		<div id="slider1" data-dojo-type="dijit/form/HorizontalSlider" aria-label="slider 1" data-dojo-props='name:"horizontal1",
			onChange:function(val){ dom.byId("slider1input").value=dojo.number.format(val/100,{places:1,pattern:"#%"}); },
			value:10,
			maximum:100,
			minimum:0,
			pageIncrement:100,
			showButtons:true,
			intermediateChanges:true,
			slideDuration:500,
			style:{width:"50%", height:"20px"}
			'>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em",fontSize:"75%"}, count:6, numericMargin:1'></ol>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:6, style:{height:"5px"}'></div>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:{height:"5px"}'></div>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em",fontSize:"75%"}'>
					<li>lowest</li>
					<li>normal</li>
					<li>highest</li>
				</ol>
		</div>

		<label for="slider1input">Slider1 Value:</label><input readonly id="slider1input" size="4" value="10.0%"/>
		<br>
		<button id="disableButton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("slider1").set("disabled", true);registry.byId("disableButton").set("disabled",true);registry.byId("enableButton").set("disabled",false); }'>Disable previous slider</button>
		<button id="enableButton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("slider1").set("disabled",false);registry.byId("disableButton").set("disabled",false);registry.byId("enableButton").set("disabled", true); }, disabled:true'>Enable previous slider</button>

		<h2>Vertical Slider Example</h2>
		initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br>
		<div id="slider2" data-dojo-type="dijit/form/VerticalSlider" data-dojo-props='name:"vertical1",
			onChange:function(val){ dom.byId("slider2input").value = val; },
			value:10,
			maximum:100,
			minimum:0,
			discreteValues:11,
			"aria-label":"slider 2",
			style:{height:"300px"}
			'>
				<ol data-dojo-type="dijit/form/VerticalRuleLabels" data-dojo-props='container:"leftDecoration", style:{width:"2em"}, labelStyle: document.documentElement.dir=="rtl" ? "left:3px;" : "right:3px;"'>
					<li>0</li>
					<li>100</li>
				</ol>
				<div data-dojo-type="dijit/form/VerticalRule" data-dojo-props='container:"leftDecoration", count:11, style:{width:"5px"}, ruleStyle:"border-color: #888"'></div>
				<div data-dojo-type="dijit/form/VerticalRule" data-dojo-props='container:"rightDecoration", count:11, style:{width:"5px"}, ruleStyle:"border-color: #888"'></div>
				<ol data-dojo-type="dijit/form/VerticalRuleLabels" data-dojo-props='container:"rightDecoration", style:{width:"2em"}, count:6, numericMargin:1, maximum:100, constraints:{pattern:"#"}'></ol>
		</div>
		<label for="slider2input">Slider2 Value:</label><input readonly id="slider2input" size="3" value="10"/>

		<h2>Fancy HTML labels (no slide animation):</h2>
		<div id="slider3" data-dojo-type="dijit/form/HorizontalSlider" aria-label="slider 3" data-dojo-props='name:"horizontal2",
			title:"Fancy HTML Labels",
			minimum:1,
			value:2,
			maximum:3,
			discreteValues:3,
			showButtons:false,
			intermediateChanges:true,
			slideDuration:0,
			style:"width:300px; height: 40px;"
			'>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:3, style:{height:"5px"}'></div>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'>
					<li><img width=10 height=10 alt="small" src="../images/note.gif"/><br><span style="font-size: small">small</span></li>
					<li><img width=15 height=15 alt="medium" src="../images/note.gif"/><br><span style="font-size: medium">medium</span></li>
					<li><img width=20 height=20 alt="large" src="../images/note.gif"/><br><span style="font-size: large">large</span></li>
				</ol>
		</div>
		<br><br>

		<h2>Standalone ruler example:</h2>

		<div style="width:2in;border-top:1px solid black;">
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:17, style:{height:".4em"}'></div>
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:9, style:{height:".4em"}'></div>
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:5, style:{height:".4em"}'></div>
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:3, style:{height:".4em"}'></div>
			<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='labelStyle:"font-style:monospace;fontSize:.7em;margin:-1em 0px 0px -.35em;"'>
				<li></li>
				<li>1</li>
				<li>2</li>
			</ol>
		</div>

		<h2>Horizontal, with buttons, disabled (to show styling):</h2>

		<div id="sliderH2" aria-label="horizontal slider 2" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontalH2",
			onChange:function(val){ dom.byId("slider1input").value = val; },
			value:10,
			maximum:100,
			minimum:0,
			disabled:true,
			showButtons:true,
			intermediateChanges:true,
			style:{width:"50%", height:"20px"}
			'>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em", fontSize:"75%"}, count:7, constraints:{pattern:"#.00%"}'></ol>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:7, style:"height:5px;"'></div>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:"height:5px;"'></div>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'>
					<li>lowest</li>
					<li>normal</li>
					<li>highest</li>
				</ol>
		</div>


		<script>
		// so robot can get to it easily
		document.displayData=function(){
			var f = document.getElementById("form1");
			var s = "";
			for(var i = 0; i < f.elements.length; i++){
				var elem = f.elements[i];
				if(elem.nodeName.toLowerCase() == "button" || elem.type=="submit" || elem.type=="button")  { continue; }
				s += elem.name + ": " + elem.value + "\n";
			}
			return s;
		}
		</script>

		<div>
			<button name="button" onclick="alert(displayData()); return false;">view data</button>
			<input type="submit" name="submit" />
		</div>

		</form>

		<h2>Fractional Slider Example</h2>
		initial value=0.28, min=0, max=2, onChange event triggers input box value change when you mouse up or tab away<br><br>
		<div id="fractionalSlider" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='
			onChange:function(val){ dom.byId("fractionalSliderInput").value = val; },
			value:0.28,
			maximum:2,
			minimum:0,
			discreteValues:101,
			"aria-label":"fractional slider",
			style:{width:"357px"}
			'>
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:101, style:{height:"5px"}'></div>
		</div>
		<label for="fractionalSliderInput">Fractional Slider Value:</label><input readonly id="fractionalSliderInput" size="10" value="0.28"/>
	</body>
</html>
